window.addEventListener('load', function () {
    //两个变量控制图片滚动位置
    var num = 0;
    var circle = 0
    //1.获取元素
    var arrow_l = document.querySelector('.arrow-l');
    var arrow_r = document.querySelector('.arrow-r');
    var focus = document.querySelector('.focus')
    //2.鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮
    focus.addEventListener('mouseenter', function () {
        arrow_l.style.display = 'block';
        arrow_r.style.display = 'block';
        clearInterval(timer);
        //清除定时器变量
        timer = null
    })
    focus.addEventListener('mouseleave', function () {
        arrow_l.style.display = 'none';
        arrow_r.style.display = 'none';
        timer = setInterval(function () {
            //手动调用事件
            arrow_r.click();
        }, 2000)
    })
    //3.动态生成小圆圈，有几张图片，就生成几个小圆圈
    var ol = document.querySelector('.circle');
    var ul = focus.querySelector('ul');
    for (var i = 0; i < ul.children.length; i++) {
        //创建li
        var li = document.createElement('li');
        //记录当前小圆圈的索引号,自定义属性
        li.setAttribute('data-index', i);
        //把li插入到ol里
        ol.appendChild(li);
        //4.排他思想,生成小圆圈的同时直接绑定点击事件
        li.addEventListener('click', function () {
            for (var i = 0; i < ol.children.length; i++) {
                //清除li的所有类名
                ol.children[i].className = '';
            }
            //点击谁，就选中谁
            this.className = 'current';
            //5.点击小圆圈,移动图片,当然移动的是ul
            //ul 的移动距离=小圆圈的索引号*图片的宽度(注意是负值)
            //获取图片宽度
            var focusWidth = focus.offsetWidth;
            //获取当前点击的li的索引号
            var index = this.getAttribute('data-index');
            //当点击了某个li,就把这个li的索引号给num和circle
            num = index
            circle = index
            //点击圆圈,移动图片
            animate(ul, -(index * focusWidth));
        })
    }
    //第一个li默认被选中
    ol.children[0].className = 'current';
    //6.克隆第一张图片(li)放到ul最后面
    var first = ul.children[0].cloneNode(true)
    ul.appendChild(first)
    //7. 点击右侧按钮，图片滚动一张
    var flag = true;//节流阀
    arrow_r.addEventListener('click', function () {
        if (flag) {
            flag = false
            //如果走到最后一张,让ul的left为0
            if (num == ul.children.length - 1) {
                ul.style.left = 0;
                num = 0
            }
            num++;
            animate(ul, -(num * focus.offsetWidth), function () {
                flag = true
            })
            //8.点击右侧按钮，小圆圈跟随一起变化
            circle++
            //判断小圆圈是否到最后一个了
            if (circle == ol.children.length) {
                circle = 0;
            }
            circleChange()
        }
    })
    function circleChange() {
        //清除其他小圆圈的类名
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = ''
        }
        //留下当前小圆圈类名
        ol.children[circle].className = 'current'
    }

    //9. 点击左侧按钮，图片滚动一张
    arrow_l.addEventListener('click', function () {
        if (flag) {
            flag = false;
            //如果走到最后一张,让ul的left为0
            if (num == 0) {
                ul.style.left = -(ul.children.length - 1) * focus.offsetWidth + 'px';
                num = ul.children.length - 1
            }
            num--;
            animate(ul, -(num * focus.offsetWidth), function () {
                flag = true
            })
            //点击左侧按钮，小圆圈跟随一起变化
            circle--
            //判断小圆圈是否到第一个了
            if (circle < 0) {
                circle = ol.children.length - 1;
            }
            circleChange()
        }
    })
    //10.自动播放轮播图
    var timer = setInterval(function () {
        //手动调用事件
        arrow_r.click();
    }, 2000)

    // 11.电梯导航
    var fixedtool = document.querySelector('.fixedtool')
    var recommend = document.querySelector('.recommend')
    var fixedtool = document.querySelector('.fixedtool')
    var floor = document.querySelector('.floor')
    var w = floor.querySelectorAll('.w')
    var lis = fixedtool.querySelectorAll('li')
    //页面滚动函数，防止刷新页面之后导航模块消失
    function toggleTool() {
        //当移动到猜你喜欢模块，导航栏显示
        if (window.pageYOffset >= recommend.offsetTop) {
            fixedtool.style.display = 'block'
        } else {
            fixedtool.style.display = 'none'
        }
    }
    toggleTool()
    //滚动页面也需要调用函数
    document.addEventListener('scroll', function () {
        toggleTool()
        //滚动页面，让导航栏变色
        for (var i = 0; i < w.length; i++) {
            //判断页面滚动距离是否大于每个模块到顶部的距离
            if (window.pageYOffset >= w[i].offsetTop) {
                for (var j = 0; j < lis.length; j++) {
                    lis[j].className = ''
                }
                lis[i].className = 'current'
            }
        }
    })
    for (var i = 0; i < lis.length; i++) {
        lis[i].setAttribute('data-index', i)
        lis[i].addEventListener('click', function () {
            // 获取当前点击模块的索引
            var index = this.getAttribute('data-index')
            // 获取每个楼层到页面顶部的距离
            var scr = w[index].offsetTop;
            //让页面滚动
            window.scrollTo({
                left: 0,
                top: scr,
                behavior: 'smooth',
            })
            //点击之后，让当前模块变红色
            for (var j = 0; j < lis.length; j++) {
                lis[j].className = ''
            }
            this.className = 'current'
        })
    }
})